"use client"

import {useEffect, useState} from "react"
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
import {Separator} from "@/components/ui/separator"
import {Code, Eye, FileJson, Settings, Sparkles, Zap} from "lucide-react"
import {GeneratorPanel} from "@/components/panels/generator-panel"
import {PreviewPanel} from "@/components/panels/preview-panel"
import {SettingsPanel} from "@/components/panels/settings-panel"
import {JsonPlanPanel} from "@/components/panels/json-plan-panel"
import {AiAssistantPanel} from "@/components/panels/ai-assistant-panel"
import {useAppStore} from "@/lib/store"
import {useToast} from "@/hooks/use-toast"
import {ProjectPanel} from "@/components/panels/project-panel"

export default function Home() {
    const [generatedCode, setGeneratedCode] = useState("")
    const {activeTab, setActiveTab} = useAppStore()
    const {toast} = useToast()

    const handleGenerate = (code: string) => {
        setGeneratedCode(code)
        setActiveTab("preview")

        toast({
            title: "组件生成成功",
            description: "已生成组件代码",
        })
    }

    const handleCopyCode = () => {
        navigator.clipboard.writeText(generatedCode)
        toast({
            title: "复制成功",
            description: "代码已复制到剪贴板",
        })
    }

    // 同步activeTab状态
    useEffect(() => {
        const handleTabChange = (value: string) => {
            setActiveTab(value)
        }

        return () => {
            // 清理
        }
    }, [setActiveTab])

    return (
        <main className="flex min-h-screen flex-col">
            <header
                className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
                <div className="container flex h-16 items-center">
                    <div className="mr-4 hidden md:flex">
                        <Sparkles className="h-6 w-6 mr-2 text-primary"/>
                        <h1 className="text-xl font-bold">Vue3 + TypeScript + TailwindCSS 项目生成器</h1>
                    </div>
                    <div className="mr-4 flex md:hidden">
                        <Sparkles className="h-5 w-5 mr-2 text-primary"/>
                        <h1 className="text-lg font-bold">项目生成器</h1>
                    </div>
                    <div className="flex flex-1 items-center justify-end space-x-2">
                        <a
                            href="https://github.com/your-username/vue-tailwind-generator"
                            target="_blank"
                            rel="noreferrer"
                            className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-accent hover:text-accent-foreground h-9 px-3"
                        >
                            <Code className="h-4 w-4 mr-2"/>
                            <span className="hidden sm:inline">GitHub</span>
                        </a>
                    </div>
                </div>
            </header>

            <div className="container py-6 md:py-8">
                <p className="text-muted-foreground mb-6">使用AI快速生成Vue3项目，集成TypeScript、Vite和TailwindCSS。</p>
                <Separator className="my-6"/>

                <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                    <TabsList className="grid w-full grid-cols-6">
                        <TabsTrigger value="generator" className="flex items-center gap-2">
                            <Zap className="h-4 w-4"/>
                            <span>生成器</span>
                        </TabsTrigger>
                        <TabsTrigger value="preview" className="flex items-center gap-2">
                            <Eye className="h-4 w-4"/>
                            <span>预览</span>
                        </TabsTrigger>
                        <TabsTrigger value="settings" className="flex items-center gap-2">
                            <Settings className="h-4 w-4"/>
                            <span>配置</span>
                        </TabsTrigger>
                        <TabsTrigger value="json-plan" className="flex items-center gap-2">
                            <FileJson className="h-4 w-4"/>
                            <span>JSON计划</span>
                        </TabsTrigger>
                        <TabsTrigger value="ai-assistant" className="flex items-center gap-2">
                            <Sparkles className="h-4 w-4"/>
                            <span>AI助手</span>
                        </TabsTrigger>
                        <TabsTrigger value="project" className="flex items-center gap-2">
                            <Code className="h-4 w-4"/>
                            <span>项目</span>
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent value="generator">
                        <GeneratorPanel onGenerate={handleGenerate}/>
                    </TabsContent>

                    <TabsContent value="preview">
                        <PreviewPanel code={generatedCode} onCopy={handleCopyCode} componentName="生成的组件"/>
                    </TabsContent>

                    <TabsContent value="settings">
                        <SettingsPanel/>
                    </TabsContent>

                    <TabsContent value="json-plan">
                        <JsonPlanPanel/>
                    </TabsContent>

                    <TabsContent value="ai-assistant">
                        <AiAssistantPanel onCodeGenerated={handleGenerate}/>
                    </TabsContent>

                    <TabsContent value="project">
                        <ProjectPanel/>
                    </TabsContent>
                </Tabs>
            </div>
        </main>
    )
}
